import React, { Component } from 'react';
import './index.scss'
import {
  DownOutlined
} from '@ant-design/icons';

import { connect } from "react-redux";
import actionCreator from "../../store/actionCreator";
import { bindActionCreators } from "redux";
import MenusData from '../../assets/MenuData'


class Menus extends Component {
  setActiveCategory(params = '') {
    let { MenuShrink, activeCategory, SHRINK_BOARD, SET_ACTIVE_CATEGORY } = this.props
    if (activeCategory.value === params.value) {
      SET_ACTIVE_CATEGORY({
        value: '',
        title: ''
      })
      return
    }
    SET_ACTIVE_CATEGORY(params)
    if (MenuShrink) {
      SHRINK_BOARD(false)
    }
  }

  selectItem(params) {
    let { SELECT_ITEM, SET_HIGHLIGHT_CATEGORY } = this.props
    SELECT_ITEM(params) //更新选中的二级菜单
    let highlightCategory = null
    MenusData.forEach((item, index) => {
      if (item.children && item.children.length > 0) {
        item.children.forEach((ele, idx) => {
          if (ele.value === params.value) {
            highlightCategory = item
          }
        })
      }
    })
    SET_HIGHLIGHT_CATEGORY(highlightCategory)
  }

  render() {
    let { MenuShrink, activeCategory, itemSelected, highlightCategory } = this.props
    return (
      <div className={`menus_wrap ${MenuShrink ? 'shrink_menu' : ''}`}>
        {
          MenusData.map((menuItem, menuIndex) => {
            return (
              <SubMenus
                key={menuItem.value}
                activeCategory={activeCategory}
                highlightCategory={highlightCategory}
                menuItem={menuItem}
                setActiveCategory={(v) => {
                  this.setActiveCategory(v)
                }}
                itemSelected={itemSelected}
                selectItem={(v) => {
                  this.selectItem(v)
                }}
              ></SubMenus>
            )
          })
        }
      </div>
    );
  }
}

export default connect(state => state, (dispatch) => {
  return bindActionCreators(actionCreator, dispatch)
})(Menus);

class SubMenus extends Component {
  render() {
    let {
      activeCategory,
      highlightCategory,
      setActiveCategory,
      menuItem,
      itemSelected,
      selectItem
    } = this.props
    return (
      <div className="sub_menus">
        {/* 分类部分 */}
        <div
          className={`sub_main ${(activeCategory.value === menuItem.value) || (highlightCategory.value === menuItem.value) ? 'active' : ''}`}
          onClick={() => {
            setActiveCategory(menuItem)
          }}>
          {/*  icon*/}
          <div className="sub_main_icon_wrap"> {menuItem.icon || ''} </div>
          {/*  标题*/}
          <div className="sub_main_title">
            <span>{menuItem.title || ''}</span>
          </div>
          {/* 小箭头*/}
          <div className={`sub_arrow ${activeCategory.value === menuItem.value ? 'arrow_down' : ''}`}>
            <DownOutlined />
          </div>
        </div>

        {/*内容的部分*/}
        <div className={`sub_content_list ${activeCategory.value === menuItem.value ? 'show' : 'hidden'}`}>
          {
            menuItem.children && menuItem.children.length > 0 ? menuItem.children.map((item, index) => {
              return (
                <SubMenuList
                  item={item}
                  key={index + 'SubMenuList'}
                  itemSelected={itemSelected}
                  selectItem={selectItem}
                ></SubMenuList>
              )
            }) : ''
          }
        </div>
      </div>
    )
  }
}

function SubMenuList(props) {
  let { item, itemSelected, selectItem } = props
  return (
    <div className={`sub_menu_items ${itemSelected.value === item.value ? 'selected' : ''}`}
      onClick={() => {
        selectItem(item)
      }}>
      <span>{item.title || ''}</span>
    </div>
  )
}
